<!DOCTYPE html>
<html lang="en">
<link>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Category管理</title>
    <meta name="description" content="Category管理">
    <meta name="keywords" content="Category管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式/组件 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/elementui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/elementui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>

<body class="hold-transition">

<div id="app">

    <div class="content-header">
        <h1>Category管理<small>Category管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>Category管理</el-breadcrumb-item>
            <el-breadcrumb-item>Category管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="filter-container">
            <!--查询表单-->
            <el-form :inline="true">
                <el-form-item label="分类名称">
                    <el-input v-model="searchMap.name" placeholder="分类名称" class="filter-item">
                    </el-input>
                </el-form-item>
                <el-button type="primary" @click="findPage()">查询</el-button>
                <el-button type="primary" class="butT" @click="formVisible=true;formData=
                                                                                    {parentId:
                                                                                        searchMap.parentId}">添加分类</el-button>
            </el-form>
            </div>

            <el-table :data="tableData"
                      style="width:100%">
                <el-table-column
                                        prop="id"
                                        label="分类ID"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="name"
                                        label="分类名称"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="goodsNum"
                                        label="商品数量"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        label="级别"
                                        width="180">

                    <template slot-scope="scope">
                        {{parentIds.length+1}}
                    </template>

                </el-table-column>
                <el-table-column

                                        label="是否显示"
                                        width="80">

                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isShow"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0">
                        </el-switch>
                    </template>

                </el-table-column>
                <el-table-column

                                        label="是否导航"
                                        width="80">

                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isMenu"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0">
                        </el-switch>
                    </template>

                </el-table-column>
                <el-table-column

                                        label="设置"
                                        width="180">

                    <template slot-scope="scope">
                        <el-button v-if="parentIds.length<2" @click="queryByParentId(scope.row.id)" size="mini" type="primary" size="small">查看下级</el-button>
                        <el-button @click="returnQuery()" type="primary" size="small">返回上级</el-button>
                    </template>

                </el-table-column>
                <el-table-column

                                        label="模板"
                                        width="180">

                    <template slot-scope="scope">
                    <el-select v-model="scope.row.templateId" filterable placeholder="请选择">
                        <el-option v-for="s in templateList"
                                   :key="s.id"
                                   :label="s.name"
                                   :value="s.id"></el-option>
                    </el-select>
                    </template>

                </el-table-column>

                <el-table-column

                                        label="操作"
                                        width="180">

                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row.id)" size="mini" type="primary" size="small">修改</el-button>
                        <el-button @click="del(scope.row.id)" size="mini" type="danger" size="small">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>

            <el-dialog title="添加/编辑" :visible.sync="formVisible">
                <el-form>
                    <el-form-item label="分类名称">
                        <el-input v-model="formData.name" placeholder="分类名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input v-model="formData.goodsNum" placeholder="商品数量">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-switch v-model="formData.isShow" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="是否导航">
                        <el-switch v-model="formData.isMenu" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="formData.seq">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="模板">
                        <el-select v-model="formData.templateId" filterable placeholder="请选择">
                            <el-option v-for="s in templateList"
                                       :key="s.id"
                                       :label="s.name"
                                       :value="s.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="save()">提交</el-button>
               <el-button @click="formVisible=false">关闭</el-button>
            </el-dialog>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            tableData:[],
            searchMap:{
                parentId:0
            },
            formVisible:false,
            formData:{},
            parentIds:[],
            templateList:[]
        },
        created(){
            this.findPage();
            this.findTemplate();
        },
        methods:{
            findTemplate(){
                axios.get(`/template/findAll.do`).then(res =>{
                        this.templateList = res.data;
                })
            },
            findPage(){
                axios.post(`/category/findList.do`,this.searchMap).then( res=>{
                        this.tableData = res.data;
                })
            },
            queryByParentId(parentId){
                // 做记号
                this.parentIds.push(this.searchMap.parentId);
                this.searchMap.parentId =parentId;
                this.findPage();
            },
            returnQuery(){
                if(this.parentIds.length > 0){
                    this.searchMap.parentId = this.parentIds[this.parentIds.length-1];
                    this.parentIds.splice(this.parentIds.length-1,1); // 删除数组最后一个元素
                    this.findPage();
                }
            },
            save(){ // 带@RequestBody
                this.formData.parentId = this.searchMap.parentId; // 当前formData 上级searchMap
                axios.post(`/category/${this.formData.id==null ? "add" : "update"}.do`,this.formData).then( res=>{
                        alert("操作成功");
                        this.findPage();
                        this.formVisible = false; // 关闭窗口
                })
            },
            edit(id){ // 不带@RequestBody
                // 根据ID查询记录 回显
                axios.get(`/category/findById.do?id=${id}`).then( res=>{
                    this.formVisible = true; // 打开窗口
                    this.formData = res.data;
                })
            },
            del(id){ // 不带@RequestBody
                this.$confirm('确定要删除此记录吗?','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( 
                    () => {
                        axios.get(`/category/delete.do?id=${id}`).then(
                            res => {
                                if (res.data.success){
                                    this.findPage();
                                    this.$message({
                                        message:"删除成功",
                                        type:"success"
                                    });
                                }else {
                                    this.$message.error(res.data.message);
                                }
                            }
                        )
                    }
                )
            }
        }
    })
</script>

</body>
</html>